<template>
  <div>
    <el-card>
      <el-row>
        <el-col>
           
          <el-select
            v-model="roleId"
            placeholder="选择"
            @change="selectRole"
          >
            <el-option
              v-for="item in allRole"
              :key="item.id"
              :value="item.id"
              :label="item.name"
              style="height:70px ;"
            ></el-option>
          </el-select>
   

          <el-button
            type="primary"
            @click="showCateDialog()"
            style="margin-left: 5px"
            >添加分类</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-table
      :data="
        tableData
      "
      highlight-current-row
      v-loading="listLoading"
      style="width: 100%"
  

      border=""
    >
      <el-table-column prop="name" label="参数名称"></el-table-column>

      <el-table-column label="操作">
        <template scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDel(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible">
      <!-- 添加分类的表单 -->
      <el-form
        :model="addCateForm"
        ref="addCateFormRef"
        :rules="addCateFormRules"
        label-width="100px"
      >
        <el-form-item label="参数名称:" prop="name">
          <el-input v-model="addCateForm.name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:">
          <el-cascader
            :options="tableData"
            v-model="selectedKeys"
            :props="{
              value: 'id',
              label: 'name',
              children: 'children',
              checkStrictly: true,
            }"
            clearable
            @change="parentCateChanged"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateclick">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑分类名称 -->
    <el-dialog
      title="编辑分类名称"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form ref="form" :model="form" :rules="addCateFormRules">
        <el-form-item
          label="参数名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { addType, getType, editType ,deleteType} from "../../api/type";
export default {
  data() {
    return {
      formLabelWidth: "120px",
     allRole:[{
         id:1,
         name:'666',
      
     },
     {
         id:2,
         name:'666',
      
     },
     {
         id:3,
         name:'666',
      
     },
     {
         id:4,
         name:'666',
      
     }],
      //子级
      parentCateList: {},
      addCateDialogVisible: false,
      // 添加分类表单数据对象
      addCateForm: {
        // 将要添加的分类名称
        name: "",
        // 父级分类的id
        parentLevelId: 0,
      },
      dialogFormVisible: false,
      form: {
        name: "",
        id: 0,
        newIndex: 0,
      },
      listLoading: false,
      // 表格数据
      tableData: [
        {
          id: 1,
          name: "CPU",
          children: [
            {
              id: 3,
              name: "CPU",
            },
          ],
        },
        {
          id: 2,
          name: "CPU",
          children: [
            {
              id: 4,
              name: "CPU",
            },
          ],
        },
      ],
      selectedKeys: {},
      addCateFormRules: {
        name: [
          { required: true, message: "请输入分参数名称", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    parentCateChanged(values) {
      console.log(values);
      // 如果selectedKeys数组中的length大于0，证明选中的父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的ID
        this.addCateForm.parentLevelId =
          this.selectedKeys[this.selectedKeys.length - 1];

        // eslint-disable-next-line no-useless-return
        return;
      } else {
        // 父级分类的id
        this.addCateForm.parentLevelId = 0;
      }
    },
    //添加
    showCateDialog() {
      this.addCateDialogVisible = true;
    },
    // 提交添加分类
    addCateclick() {
      this.$refs.addCateFormRef.validate((valid) => {
        if (valid) {
          //   addType(this.addCateForm).then(({ data }) => {
          //     if (data.code == 200) {
          //       this.tableData.push(data.data);
          //       this.addCateDialogVisible = false;
          //     } else {
          //       this.$message.error(data.msg);
          //     }
          // });
        } else {
          this.$message.error("该空不能为空，请填写完毕重新提交");
        }
      });
    },
    handleEdit(index, row) {
      this.form.name = row.name;
      this.form.id = row.id;
      this.form.newIndex = index;
      this.dialogFormVisible = true;
    },
    // 修改分类名称
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //   editType(this.form.id, this.form).then(({ data }) => {
          //     this.tableData.splice(this.form.newIndex,data.data);
          //     this.dialogFormVisible = false;
          //   });
        } else {
          this.$message.error("该空不能为空，请填写完毕重新提交");
        }
      });
    },
    handleDel(index, row) {
      console.log(index, row);
      //   deleteType(row.id).then(({data})=>{
      //     console.log(data);
      //   })
    },
  },
  mounted() {
    // getType().then(({ data }) => {
    //   this.tableData = data.data;
    // });
  },
};
</script>

<style>

</style>